<template>
  <el-dialog title="商品选择" v-model="dialogvisiable" width="80%" destroy-on-close>
    <el-table id="goods-list-table" ref="multipleTableRef" @selection-change="handleSelectionChange" :data="tableData" 
      style="width: 100%; height: 300px;" stripe lazy>
        <el-table-column fixed="left" type="selection" width="55" />
        <el-table-column label="商品">
          <template #default="{ row }">
            <div class="flex">
              <el-image class="mr-3 rounded" style="width: 50px;height: 50px;" :src="row.cover" fit="cover"></el-image>
              <div class="flex-1">
                <p>{{row.title}}</p>
                <p class="text-xs mb-1 text-gray-400">分类：{{row.category ? row.category.name : '未分类'}}</p>
                <p class="text-xs text-gray-400">创建时间：{{row.create_time}}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stock" align="center" width="90" label="总库存"/>
        <el-table-column align="center" label=" 价格(元)">
        <template #default="{ row }">
          <span class="text-rose-500">￥{{row.min_price}}</span>
          <el-divider direction="vertical"></el-divider>
          <span class="text-gray-500 text-xs">￥{{row.min_oprice}}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex items-center justify-center mt-5">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage"
        :page-size="limit" @current-change="getData"/>
    </div>

    <template #footer>
      <span>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
  
</template>

<script setup>
  import { ref } from 'vue'
  import { getGoodsListApi } from '@/api/goods.js'
  import { useInitTable } from '@/hooks/useCommon.js'
  
  const dialogvisiable = ref(false)
  const callbackFunction = ref(null)
  function open(callback = null) {
    callbackFunction.value = callback
    dialogvisiable.value = true
  }

  function close() {
    dialogvisiable.value = false
  }

  const {
    handleSelectionChange,
    multiSelectionIds,
    searchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    multipleTableRef,
  } = useInitTable({
    getlist: getGoodsListApi,
    onGetListSuccess: (res) => {
      tableData.value = res.list
    },
  })

  function submit() {
    if(callbackFunction.value && typeof callbackFunction.value === 'function') {
      callbackFunction.value(multiSelectionIds.value)
      close()
    }
  }

  defineExpose({
    open
  })

</script>

<style scoped>
</style>